<template>
	<view class="aspect-ratio">
		<view class="aspect-ratio-box" :style="{paddingBottom: `${100 * ratio}%`}">
			<view class="aspect-ratio-box-box">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
  import { computed, ref } from 'vue'
	const props = defineProps({
		ratio: {
			type: Number,
			default: 1
		}
	})
</script>

<style lang="scss" scoped>
  .aspect-ratio {
  	width: 100%;
		&-box {
			position: relative;
			top: 0;
			left: 0;
			padding-bottom: 100%;
			&-box {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}
  }
</style>
